<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jqGrid Demo</title>
</head>
<body>
<link rel="stylesheet" type="text/css" media="screen" href="/prj/jgrid/themes/redmond/jquery-ui-1.7.1.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="/prj/jgrid/themes/ui.jqgrid.css"/>


<script src="/prj/jgrid/js/jquery.js" type="text/javascript"></script>

<script src="/prj/jgrid/js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="/prj/jgrid/js/jquery.layout.js" type="text/javascript"></script>
<script src="/prj/jgrid/js/src/grid.loader.js" type="text/javascript"></script>

<script src="/prj/jgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/prj/jgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/prj/jgrid/js/jquery.tablednd.js" type="text/javascript"></script>

<script src="/prj/jgrid/js/jquery.contextmenu.js" type="text/javascript"></script>
<style>
    html, body {
        margin: 0; /* Remove body margin/padding */
        padding: 0;
        overflow: true; /* Remove scroll bars on browser window */
        font-size: 75%;
    }

    /*Splitter style */

    .ui-datepicker {
        z-index: 1200;
    }


</style>
<script type="text/javascript">

    var gridimgpath = 'themes/redmond/images';
    var fmtDate = 'yy-mm-dd';
    jQuery(document).ready(function() {
        jQuery("#navgrid1").jqGrid({ url:'someurl.php', datatype: "json",
            colNames:['Nume','Descriere','Packetul de baza'],
            colModel:[
                {
                    name:'name',
                    index:'name',
                    width:50,
                    align:'right',
                    sortable:true,
                    editable:true,
                    editoptions:{size:10},
                    formoptions:{rowpos:1,label:"Nume",elmprefix:"(*)"},
                    editrules:{required:true}
                },
                {
                    name:'description',
                    index:'description',
                    width:200,
                    align:'right',
                    sortable:true,
                    editable:true,
                    edittype:"textarea",
                    editoptions:{size:10},
                    formoptions:{rowpos:2,label:"Descriere",elmprefix:"&nbsp;&nbsp;&nbsp;&nbsp;"}
                },
                {
                    name:'packageBase',
                    index:'packageBase',
                    width:200,
                    align:'right',
                    sortable:true,
                    editable:true,
                    editoptions:{size:10},
                    formoptions:{rowpos:3,label:"Packetul de baza",elmprefix:"(*)"},
                    editrules:{required:true}
                }
            ],rowNum:10, rowList:[10,20,30], imgpath: gridimgpath, pager: '#pagernav1', sortname: '#id', viewrecords: true, sortorder: "desc", caption:"Project List", editurl:"someurl.php", height:250}).navGrid('#pagernav1', {view:true},
            //options
        {savekey: [true,13], navkeys: [true,38,40],reloadAfterSubmit:false, jqModal:false, closeOnEscape:true, bottominfo:"Fields marked with (*) are required"},
            // edit options
        {savekey: [true,13], navkeys: [true,38,40], reloadAfterSubmit:false,jqModal:false, closeOnEscape:true,bottominfo:"Fields marked with (*) are required"},
            // add options
        {reloadAfterSubmit:false,jqModal:false, closeOnEscape:true}, // del options
        {closeOnEscape:true}, // search options
        {navkeys: [true,38,40], height:250,jqModal:false,closeOnEscape:true} // view options
                );
    }); </script>
<table id="navgrid1" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="#pagernav1" class="scroll" style="text-align:center;"></div>

</body>
</html>